<template>
  <div>
    <h2>使用 element</h2>
    <h3>1.0 按钮</h3>
    <el-button round>圆角按钮</el-button>
    <el-button type="primary" round>主要按钮</el-button>
    <el-button type="success" round>成功按钮</el-button>
    <el-button type="info" round>信息按钮</el-button>
    <el-button type="warning" round>警告按钮</el-button>
    <el-button type="danger" round>危险按钮</el-button>
    <h3>2.0 输入框</h3>
    <el-input
      prefix-icon="el-icon-user-solid"
      v-model="input.username"
      placeholder="请输入内容"
    ></el-input>
    <el-input
      prefix-icon="el-icon-lock"
      show-password
      v-model="input.password"
      placeholder="请输入内容"
    ></el-input>
    <h3>3.0 表单</h3>
    <h4>3.1 表单的基本用法</h4>
    <el-form :model="form">
      <el-form-item>
        <el-input v-model="form.uname" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="form.pwd"
          show-password
          placeholder="密码"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width: 100%">登录</el-button>
      </el-form-item>
    </el-form>
    <h4>3.2 表单校验</h4>
    <el-form :model="form" :rules="rules">
      <el-form-item prop="uname">
        <el-input v-model="form.uname"></el-input>
      </el-form-item>
      <el-form-item prop="pwd">
        <el-input v-model="form.pwd"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width: 100%">登录</el-button>
      </el-form-item>
    </el-form>
    <h4>3.3 自定义校验规则</h4>
    <el-form :model="myform" :rules="myrules">
      <el-form-item prop="mobile">
        <el-input v-model="myform.mobile" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input v-model="myform.code" placeholder="请输入验证码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button>登录</el-button>
      </el-form-item>
    </el-form>
    <h4>3.4 全局校验规则</h4>
    <el-form ref="myform1" :model="myform" :rules="myrules">
      <el-form-item prop="mobile">
        <el-input v-model="myform.mobile" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input v-model="myform.code" placeholder="请输入验证码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="login">登录</el-button>
      </el-form-item>
    </el-form>
    <h4>3.5 局部校验</h4>
    <el-form ref="myform2" :model="myform" :rules="myrules">
      <el-form-item prop="mobile">
        <el-input v-model="myform.mobile" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input v-model="myform.code" placeholder="请输入验证码"></el-input>
        <el-button @click="getCode">点我得到验证码</el-button>
      </el-form-item>
      <el-form-item>
        <el-button>登录</el-button>
      </el-form-item>
    </el-form>
    <h3>4.0 加载</h3>
    <h4>4.1 按钮中的加载效果</h4>
    <el-button :loading="loading" @click="fn">点击</el-button>
    <h4>4.2 页面区域加载效果</h4>
    <div v-loading="myloading" style="width: 1000px;height: 300px; margin: 0 auto;border: 4px solid #ccc;"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      input: {
        username: '',
        password: ''
      },
      form: {
        uname: '',
        pwd: ''
      },
      // 定义校验规则
      rules: {
        uname: [
          //  必须项            出错后的提示           校验的时机：blur 失去焦点
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        pwd: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      myform: {
        mobile: '',
        code: ''
      },
      myrules: {
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          // 自定义校验规则：
          {
            validator: (rule, value, callback) => {
              // value：当前验证的值
              // callback:回调函数
              //  验证通过： callback()
              //  不通过： callback(new Error('错误信息'))
              // 定义手机号的正则
              const reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
              // 将 value 与正则进行匹配
              const bool = reg.test(value)
              // 判断是否验证通过
              bool ? callback() : callback(new Error('手机号不合法'))
            },
            trigger: 'blur'
          }
        ],
        code: [{ required: true, message: '验证码不能为空', trigger: 'blur' }]
      },
      // 按钮的加载效果
      loading: false,
      // 结构的加载效果
      myloading: true
    }
  },
  methods: {
    login () {
      // 得到表单，调用方法
      this.$refs.myform1.validate(result => {
        if (result) {
          console.log('全局验证成功')
        } else {
          console.log('全局验证失败')
        }
      })
    },
    getCode () {
      this.$refs.myform2.validateField(['mobile'], errorMsg => {
        // errorMsg === '' 验证通过
        // errorMsg 不为空：验证失败
        if (errorMsg) {
          console.log('验证不通过')
        } else {
          console.log('验证通过')
        }
      })
    },
    fn () {
      this.loading = true
      setTimeout(() => {
        this.loading = false
      }, 3000)
    }
  }
}
</script>

<style></style>
